<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>课程管理</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" href="/css/back-index.css" th:href="@{/css/back-index.css}" />
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }
        /*.file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }*/
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .img {
            /* max-width: 100px; */
            width: 100px;
            /* max-height: 120px; */
        }
        tr td {
            line-height: 120px !important;
        }

    </style>
    <script>
        function selectCourse(id){
            $.ajax({
                type: "post",
                url: "/course/selectCourseById",
                data: {"id":id},
                success:function (result) {
                    $("#course-id").val(result.id);
                    $("#course-name").val(result.courseName);
                    $("#course-info").val(result.courseInfo);
                    $("#course-author").val(result.author);
                    $("#recommendation-grade").val(result.recommendationGrade);
                    $("#course-type-id").val(result.courseTypeId);
                }
            })
        }
        $(function () {
            // 课程管理 修改课程
            $(".doCourseModify").on("click", function() {
                $("#course-id-input").show();
                $(".file").html("选择文件");
                $("#cover-image").val(undefined);
                $(".modal-title").html("修改课程");
                $("#Course").modal("show");
                $("#addCourseTrue").hide();
                $("#ModifyCourseTrue").show();
            });
            $(".curse-btn").on("click", function() {
                $("#Course").modal("hide");
            });

            // 课程管理 添加课程
            $("#doCourse").on("click", function() {
                $("#course-id-input").hide();
                $(".file").html("选择文件");
                $("#cover-image").val(undefined);
                $(".modal-title").html("添加课程");
                $("#Course").modal("show");
                $("#addCourseTrue").show();
                $("#ModifyCourseTrue").hide();
            });

            //课程章节显示
            $(".course-detail").on("click", function() {
                $('#frame-id', window.parent.document).attr('src', 'back_courseReourceSet.html');
            });

            // 显示隐藏查询列表
            $('#show-course-search').click(function() {
                $('#show-course-search').hide();
                $('#upp-course-search').show();
                $('.show-course-search').slideDown(500);
            });
            $('#upp-course-search').click(function() {
                $('#show-course-search').show();
                $('#upp-course-search').hide();
                $('.show-course-search').slideUp(500);
            });
            //
            // var author =$("#author-name-search").val();
            // var courseName =$("#course-name-search").val();
            // var status =$("#course-status-search").val();
            // var courseTypeId =$("#course-type-id-search").val();
            // var createDateStart =$("#course-createStart-search").val();
            // var createDateEnd =$("#course-createEnd-search").val();
            //分页
            let options={


                bootstrapMajorVersion:3,
                // currentPage:"${session.pageUsers.pageNum==0?1:session.pageUsers.pageNum}",
                currentPage:[[${pageSearchCourses.pageNum}]]==0?1:[[${pageSearchCourses.pageNum}]],
                // totalPages:"${pageUsers.pages==0?1:pageUsers.pages}",
                totalPages:[[${pageSearchCourses.pages}]]==0?1:[[${pageSearchCourses.pages}]],
                pageSize:[[${pageSearchCourses.pageSize}]],
                alignment: "center",
                pagination:true,
                // pageUrl:function (type,page,current) {
                //     return "/course/searchCourses?author="+author+"courseName="+courseName
                //         +"status="+status+"courseTypeId="+courseTypeId
                //         +"createDateStart="+createDateStart
                //         +"createDateEnd="+createDateEnd+"pageNo="+page;
                //
                // }
                onPageClicked: function (event,originalEvent,type,page){

                    $("#showList").empty();
                    $("#showList").load("/course/searchCourses",{"courseName":$("#course-name-search").val(),"author":$("#author-name-search").val(),
                        "courseTypeId":$("#course-type-id-search").val(),"status":$("#course-status-search").val(),
                        "createDateStart":$("#course-createStart-search").val(),"createDateEnd":$("#course-createEnd-search").val(),
                        "pageNo":page});
                    $("#myPages").hide();
                }

            }
            $("#mySearchPages").bootstrapPaginator(options);

        })
        function imageUpload(item){
            $(item).click();
        }
        function imageChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }
        function modifyCourse() {
            let formData=new FormData($("#myForm")[0]);
            $.ajax({
                url:"/course/modifyCourse",
                type:"post",
                // data:{"courseName":$("#course-name").val(),"courseInfo":$("#course-info").val(),"author":$("#course-author").val(),
                // "recommendationGrade":$("#recommendation-grade").val(),"courseTypeId":$("#course-type-id").val()}
                data: formData,
                processData: false,
                contentType:false,
                success:function (response) {
                    if (response.status==1) {
                        href.location="/course/showCourseList";
                    }
                    else {
                        alert(response.message);
                    }
                }
            })
        }

        function modifyCourseStatus(id,status) {
            $.ajax({
                type:"post",
                url:"/course/modifyCourseStatus",
                data:{"id":id,"status":status},
                success:function (response) {
                    if (response.status==1) {
                        location.href="/course/showCourseList";
                    }
                    else {
                        alert(response.message);
                    }
                }
            })

        }
    </script>
</head>
<body>
<div class="show-list">
    <table class="table table-bordered table-hover" style="text-align: center;">
        <thead>
        <tr class="text-danger">
            <th class="text-center">编号</th>
            <th class="text-center">课程名称</th>
            <th class="text-center">作者</th>
            <th class="text-center">封面图片</th>
            <th class="text-center">点击量</th>
            <th class="text-center">推荐等级</th>
            <th class="text-center">课程类别</th>
            <th class="text-center">创建时间</th>
            <th class="text-center">状态</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr th:each="course:${pageSearchCourses.list}">
            <td th:text="${course.id}"></td>
            <td th:text="${course.courseName}"></td>
            <td th:text="${course.author}"></td>
            <td><img class="img" th:src="@{${course.coverImageUrl}}" alter="no image" /></td>
            <!--                            <td><img class="img" src="/upload/coverImg/20201229094521java-base.png" alter="no image" /></td>-->
            <td th:text="${course.clickNumber}"></td>
            <td th:text="${course.recommendationGrade}"></td>
            <td th:text="${course.courseTypeId}==1?'普通':'推荐'"></td>
            <td th:text="${course.createDate}"></td>
            <td th:text="${course.status}==1?'启用':'禁用'" ></td>
            <td class="text-center">
                <input type="button" class="btn btn-warning btn-sm doCourseModify" value="修改" th:onclick="|javascript:selectCourse('${course.id}')|" />
                <input type="button" th:value="${course.status}==1?'禁用':'启用'" th:class="${course.status}==1?'btn btn-danger btn-sm':'btn btn-success btn-sm'"
                       th:onclick="|javascript:modifyCourseStatus('${course.id}','${course.status}')|"/>
                <input type="button" class="btn btn-success btn-sm course-detail" value="章节详情" />
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!-- 分页 -->
<div style="text-align: center;" >
    <ul id="mySearchPages" ></ul>
</div>
</body>
</html>